<head>
    <#assign basePath=request.contextPath>
    <title>后台管理系统</title>
    <#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
    <style>
        body, ul, li, h1, h2, h3, h4, p, input, strong, dl, dt, dd { font-size:14px; font-family:"微软雅黑"; margin: 0;padding: 0;}
        a, a:hover {text-decoration: none;}
        ul, li {list-style:none;}
        input {outline:none;vertical-align: middle;}
        input:-webkit-autofill {background-color: #fff;  background-image: none;  }
        input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
        img {border:none;vertical-align: middle;}
        .cf:after {clear: both;content: ".";display: block;font-size: 0;height: 0;line-height: 0;visibility: hidden;}
        .cf {*zoom:1;}
        a,span{display:inline-block;}
        html{ height: 100%; }
        .loginBg{height:100%; width:100%;  background:url("${ctx}/bootstrap/images/bg.jpg") no-repeat center top/cover; position: relative; overflow: hidden;}
        .w1200{width:1200px; margin:0 auto;}
        .header{width:100%;height:120px; background-color:rgba(255,255,255,0.9);}
        .logPic{height:120px;background:url("${ctx}/bootstrap/images/login_log1.png") no-repeat center center; }
        .section{padding-top:9%;}
        .section .wrap-login{width:560px; height:430px;border-radius:3px; margin:0 auto; position:relative;}
        .wrap-login .border-blue{ background-color:rgba(255,255,255,0.5); padding: 10px; border-radius:3px; }
        .wrap-login .border-circle1{border:5px solid #9ebadf;width:540px; height:446px;border-radius:10px; position:absolute; top:4px;left:5px;z-index:1;}
        .wrap-login .wrap-title{height:60px;font-size:20px; color:#000; background-color: #e7eff9; font-weight: bold; font-family:"宋体";line-height:60px;}
        .wrap-login .wrap-cont{background:#fff; padding:40px 70px 20px;}
        .form-row{margin-bottom:20px; }
        .form-row label{width: 70px;padding-right:15px;display: inline-block;line-height:40px;text-align:right;}
        .form-row input[type="text"],.form-row input[type="password"]{width:257px;height:40px;padding-left:10px; border:1px solid #ccc; color:#333;font-size:16px; line-height:40px;vertical-align:top; padding-right:40px; display: inline-block; border-radius: 5px;}
        .form-row input:focus{border-color:#6a96df}
        .form-row input.userName{background:url("${ctx}/bootstrap/images/input_bg.jpg") no-repeat right -2px;}
        .form-row input.loginPw{background:url("${ctx}/bootstrap/images/input_bg.jpg") no-repeat right -48px;}
        .form-row input.captcha{width:140px;background:url("${ctx}/bootstrap/images/input_bg.jpg") no-repeat 0 0;}
        .form-row span.varityCode{width:100px; height:40px; margin-left:5px;margin-right:2px;vertical-align:top;float:right;}
        .form-row span.varityCode img{width:100%;height:100%;border:0;vertical-align:top; }
        .remember{color:#666;font-size:14px; line-height:20px;}
        .remember .checkBox-login{margin-right:10px;}
        .remember .blue-font{color:#3c9bf1;float:right; cursor:pointer;}
        .form-btn{padding-top:10px;}
        .form-btn input.loginBtn{width:385px; height:45px; margin-left: 15px; border-radius:6px; line-height:45px; text-align:center; color:#fff;font-size:22px; font-family:"宋体"; border:0; background:#FFBE34; letter-spacing: 2px; cursor:pointer;}
        .footer{ position: fixed; bottom: 0; left: 0; width:100%;height:40px; padding: 5px 0; background-color:rgba(255,255,255,0.5);}
        .footer p{color:#000;font-size:14px; text-align:center;line-height:20px;}
        .footer p span{margin-left:25px;}

        .wrap-title{ display: block; text-align: center;}
        .wrap-title a{ font-size: 16px; font-weight: normal; font-family: "Microsoft Yahei"; color: #666; margin: 0 15px; line-height: 30px;}
        .wrap-title a.cur,.wrap-title a:hover{ border-bottom: 2px solid #FFBE34; color: #FFBE34;}
        .password{ text-align: right;}
        .password a{ color: #FFBE34;}
        .password a:hover{ text-decoration: underline;}
        #userpassword{ font-size: 14px;}
        .get-code{ float: right; width: 100px; background-color: #FFBE34; line-height: 42px; cursor: pointer; text-align: center; font-size: 14px; color: #fff; border-radius: 5px;}
    </style>
</head>
<script>
    //Session过期 跳出iframe框架页
    if(window != top){
        top.location.href=location.href;
    }
    var captcha;
    function refreshCaptcha(){
        document.getElementById("img_captcha").src="${ctx}/kaptcha?t=" + Math.random();
    }
</script>
</head>

<body class="loginBg">
<div class="header">
    <div class="w1200">
        <div class="logPic"></div>
    </div>
</div>
<div class="section">
    <div class="wrap-login">
        <div class="border-circle"></div>
        <div class="border-blue">
            <div class="wrap-title">
                <a class="cur" href="javascript:;">找回密码</a>
            </div>
            <div class="wrap-cont">
                <form class="sign-in-form" id="signUp" action="${ctx}/admin/login" method="post" commandName="user" onSubmit="return setpass()">
                    <div class="form-row">
                        <label>手机号：</label>
                        <input id="tel" type="text" name="username"/>
                    </div>
                    <div class="form-row">
                        <label>验证码：</label>
                        <input id="code" type="text" class="captcha" name="code"/><span class="get-code">获取验证码</span>
                    </div>
                    <div class="form-row">
                        <label>重置密码：</label>
                        <input type="password"  id="userpassword" name="" placeholder="6-20个字符，不能包含空格" />
                        <input type="hidden" id="password" name="password" />
                    </div>
                    <div class="form-row form-btn">
                        <input type="button" value="重置密码" class="loginBtn"/>
                    </div>
                    <div class="form-row password">
                        <a href="/admin/index">返回登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <p class="w1200">© Copyright 2015-2017 · 龙之游 All Rights Reserved · 浙ICP备15044812号-1 · 浙公网安备 33010302000264号</p>
    <p class="w1200" style="font-size: 12px; color: #666;">适用浏览器：360、FireFox、Chrome、Safari、Opera、IE10及以上 等主流浏览器。</p>
</div>
<script src="${ctx}/bootstrap/js/jquery.min.js"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>
<script>
    $(function () {
        var msg = '${msg}';
        if (msg != '') {
            layer.alert(msg, {
                icon: 5
            });
        }
        //验证码
        $(".get-code").click(function(){
            getCode();
            Count($(this));
        })

    });

    function setpass() {
        $("#password").val( md5($("#userpassword").val()));
        return true
    }

    //获取验证码
    function getCode(){
        var tel = $("#tel").val();
        $.ajax({
            type: 'GET',
            url: '${basePath}/api/member/sendCode?account='+tel+'&imageCodeType=1',
            dataType: 'json',
            cache: false,
            success: function(data) {
                if(data.code == "0"){
                    //校验验证码
                    var code = $("#code").val();
                    $.ajax({
                        type: 'GET',
                        url: '${basePath}/api/member/verifyCode?account='+tel+'&imageCodeType=1&authCode='+code+'',
                        dataType: 'json',
                        cache: false,
                        success: function(data) {
                            console.log(data)
                            if(data.code == "0"){
                                //提交
                                $(".loginBtn").off("click").click(function(){
                                    setpass();
                                })
                            }
                        },
                        error: function(){
                            alert("验证码错误")
                        }
                    })
                }
            },
            error: function(){
                alert("获取验证码失败")
            }
        })
    }
    //倒计时
    var Count = function(obj){
        var time = 60;//时间
        //定义时间
        var t = setInterval(function(){
            time --;
            obj.html(time + "s后重试");
            if(time == 59){
                obj.off("click");
                obj.css("background-color","#ccc");
            }
            else if(time == 0){
                clearInterval(t);
                obj.css("background-color","#FFBE34");
                obj.html("重新获取");
                obj.off("click").on("click",function(){
                    getCode();
                    Count(obj);
                });
            }
        },1000);
    };
</script>
</body>
</html>
